import { withRouter } from 'next/router'
import Layout from '../comps/MyLayout'
import dynamic from 'next/dynamic'

const DynamicComponentWithNoSSR = dynamic(import('./devicelog'), {
  ssr: false
})

const Page = withRouter(props => (
  <div
    style={{
      display: 'flex',
      margin: 20,
      padding: 20,
      border: '1px solid #DDD'
    }}
  >
    <ul style={{ flex: 1 }}>
      <li>
        {props.router.query.deviceInfo.map((d, index) => {
          return (
            <div key={index}>
              <i>{d.key}:&nbsp; </i>
              <a>{d.val}</a>
            </div>
          )
        })}
      </li>
      <li>
        <DynamicComponentWithNoSSR />
      </li>
    </ul>
    <style jsx>
      {`
        body {
          background: #fff;
          margin: 0;
          padding: 30px;
          padding: 45px;
          -webkit-font-smoothing: antialiased;
          font-family: Menlo, Consolas, monospace;
        }
        header {
          display: flex;
          justify-content: space-between;
        }

        a {
          color: #1a00f2;
          text-decoration: none;
        }

        h1 {
          font-size: 18px;
          font-weight: 500;
          margin-top: 0;
          color: #000;
          font-family: -apple-system, Helvetica;
          display: flex;
        }

        h1 a {
          color: inherit;
          font-weight: bold;
          border-bottom: 1px dashed transparent;
        }

        h1 a:hover {
          color: #7d7d7d;
        }

        h1 i {
          font-style: normal;
        }

        ul {
          margin: 0;
          padding: 20px 0 0 0;
          display: flex;
        }

        ul.single-column {
          flex-direction: column;
        }

        ul li {
          list-style: none;
          padding: 10px 0;
          font-size: 13px;
          display: flex;
          flex-direction: column;
          justify-content: space-between;
          box-sizing: border-box;
          justify-content: flex-start;
          margin-bottom: 20px;
          margin-right: 20px;
          border: 1px solid #ddd;
        }
        ul li div {
          display: flex;
          flex-direction: row;
          justify-content: space-between;
          padding-right: 10px;
        }
        ul li i {
          color: #9b9b9b;
          font-size: 11px;
          display: inline-block;
          font-style: normal;
          white-space: nowrap;
          padding-left: 15px;
        }

        ul a {
          color: #1a00f2;
          white-space: nowrap;
          overflow: hidden;
          display: block;
          text-overflow: ellipsis;
        }

        ul a:hover {
          color: #000;
        }

        ul a[class=''] + i {
          display: none;
        }

        ul a.folder::before {
          content: url("data:image/svg+xml; utf8, <svg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 64 64'><path fill='transparent' stroke='currentColor' stroke-width='4' stroke-miterlimit='10' d='M56 53.71H8.17L8 21.06a2.13 2.13 0 0 1 2.13-2.13h2.33l2.13-4.28A4.78 4.78 0 0 1 18.87 12h9.65a4.78 4.78 0 0 1 4.28 2.65l2.13 4.28h17.36a3.55 3.55 0 0 1 3.55 3.55z'/></svg>");
        }

        ul a.apk::before {
          content: url("data:image/svg+xml; utf8, <svg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 1000 1000'>
  <path d='M311.6 13.9c-7.8 7.8-5.4 14.3 15 41.6 19.4 25.9 24.5 31 30.8 31 5 0 13.1-8.9 13.1-14.4 0-5-38.8-58.8-44.1-60.8-6-2.3-10.6-1.6-14.8 2.6zM673 11.3c-4.8 2-43.5 56.1-43.5 60.8 0 5.5 8 14.4 13.1 14.4 6.3 0 11.6-5.3 30.8-31.2 14.2-19.3 18.9-27 18.9-31.4 0-10.2-9.6-16.5-19.2-12.6zM464.7 66.8A297.4 297.4 0 0 0 297 147.3a280 280 0 0 0-79.8 139c-4 16.4-4 16.6-.2 21.7l3.7 5 278.2.7c215.6.2 278.8-.2 281-2 5.9-4.7 6.3-10.6 2.5-26.5C756.6 177.3 670 94.3 558 70.7a385 385 0 0 0-93.2-3.9zM527 94.5c101 9.4 189 78.1 221.3 173.3 2.6 7.4 4.7 14.7 4.7 16.2 0 2.2-44.3 2.6-253.1 2.6s-253.1-.4-253.1-2.6c0-5.8 10-31.5 19.4-49.8a258.5 258.5 0 0 1 175.4-135c29.5-6.5 52-7.6 85.4-4.7z'/>
  <path d='M377.4 147.9a51.1 51.1 0 0 0-24.2 17.8c-4.3 6.5-5.4 10.2-5.8 22.6-.6 13.3-.2 16 4.9 25.7 10.3 19.8 31.1 28 54.5 21.6a51.4 51.4 0 0 0 29.6-26.5c8.7-23-4.9-54.4-26.5-61.6-8.4-2.8-24.9-2.6-32.5.4zm26.5 28.6c2.7 2 6.2 6 7.8 8.8 2.8 4.8 2.6 6-2 14.4-7.6 14.5-19.8 16.2-31.5 4.5-7-6.7-7.3-14-1.8-23.2 6.5-10.6 16.7-12.3 27.5-4.5zM594.2 147a44.2 44.2 0 0 0-33.4 43.8c0 18 13.4 39 28 44.6a67.1 67.1 0 0 0 18.1 2.1c16 0 30.6-7.2 39.3-19.2a54.5 54.5 0 0 0 4-44.5c-4.2-11-17-24-26.2-26.5a69.6 69.6 0 0 0-29.8-.2zm22.5 28.3c13 7.3 14.2 19.9 3 31-6.5 6.5-11.2 7.1-20.8 2.6-9.4-4.5-13.6-12.8-10.6-21.4 2.3-7.5 12.1-16.7 17.3-16.7 1.7 0 6.8 2 11.1 4.5zM222.2 352.3l-5 5 .7 170c.5 158.8 1 171.1 4.3 181.1a142.3 142.3 0 0 0 31.8 53 129.2 129.2 0 0 0 54.7 35l15.7 5.2H673.7l14.7-4.5a120.5 120.5 0 0 0 55.1-33.7 103.4 103.4 0 0 0 25.1-33.4c14.2-28.8 14-26.7 14-210.1V357l-5-4.7c-5.4-5.7-12.5-6.3-18.4-1.6l-4.3 3.6-.6 169.7c-.4 167.8-.4 170-4.7 182.5a95.7 95.7 0 0 1-67.3 63.7c-15.5 4.2-348.9 4.4-364.2.2a95.5 95.5 0 0 1-67.7-63.7c-4.3-13-4.3-13.6-5.4-183.3-1-165.8-1.2-170.5-4.8-173.2-5.7-4.2-12.5-3.4-18 2.1zM143.1 356.4c-4.1 5.1-4.1 6.7-4.1 145s0 140 4.1 145c5.1 6.5 15.1 7.1 20.6 1 3.5-3.9 3.7-9.2 3.7-146 0-136.7-.2-142-3.7-146-5.5-6-15.5-5.4-20.6 1zM835.7 356.4c-4.1 5.1-4.1 6.7-4.1 145s0 140 4.1 145c5.5 7.1 15.7 7.1 21.2 0 4.1-5 4.1-6.6 4.1-145s0-139.9-4.1-145a12 12 0 0 0-10.6-5 12 12 0 0 0-10.6 5zM339.7 820.3c-8.2 3.3-8.6 7.2-8 64.3l.6 54.4 5.4 11.2a86.5 86.5 0 0 0 14.4 20c4.7 4.9 13.7 11.2 20 14.3a47.2 47.2 0 0 0 26.8 5.5c13 0 17.7-1 27-5.3a79.3 79.3 0 0 0 34.3-33.4l5.5-10.4.5-56.9c.6-55.5.6-57-3.3-60.6-5.5-5.1-15.9-4.5-20.2 1-3.1 3.7-3.5 9.4-3.5 54.5 0 30.6-.8 53.4-2.2 58.1-7.2 26.1-46.5 34.7-66.5 14.7-10.6-10.6-11.8-17.8-11.8-74.1 0-44-.3-49.5-3.3-53-4.3-5-10-6.5-15.7-4.3zM542.2 820.3c-9 3.3-9 4.5-8.5 64.1l.6 56.5 5.5 10.4a79.3 79.3 0 0 0 34.4 33.4A51 51 0 0 0 601 990c13.4 0 17.5-.8 27-5.5a76.5 76.5 0 0 0 34.3-34.3l5.5-11.2.6-55.1c.5-51.6.3-55.4-3.2-59.7-4.5-5.5-14.7-6.3-19.6-1.2-3 3-3.5 9.8-4.3 57.7-1 50.2-1.4 55-5.1 62.2-14.2 27.3-58.9 26.1-71.7-1.8-3.3-7.2-3.7-13.5-3.7-59.6 0-29.8-.8-53.2-2-55.3-2.3-4.6-11.5-7.7-16.6-6z'/></svg>");
        }
      `}
    </style>
  </div>
))

export default Page
